<template>
  <a-layout-sider
    v-model:collapsed="collapsed"
    breakpoint="lg"
    :collapsed-width="0"
    @collapse="onCollapse"
    @breakpoint="onBreakpoint"
  >
    <div class="logo" />
    <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
      <a-menu-item key="1">
        <user-outlined />
        <span class="nav-text">nav 1</span>
      </a-menu-item>
      <a-menu-item key="2">
        <video-camera-outlined />
        <span class="nav-text">nav 2</span>
      </a-menu-item>
      <a-menu-item key="3">
        <upload-outlined />
        <span class="nav-text">nav 3</span>
      </a-menu-item>
      <a-menu-item key="4">
        <user-outlined />
        <span class="nav-text">nav 4</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
export default {
  name:'SideMenu',
  props:{
    collapsed:{
      type: Boolean,
      default: true
    },
  },
  setup(props) {
    const data = reactive({
      collapsedWidth:0,
    })

    const onCollapse = (collapsed: boolean, type: string) => {
      console.log(collapsed, type);
      if(type == 'responsive'){
        data.collapsedWidth = collapsed?0:80
      }else if(type == 'clickTrigger'){
        //
      }
    };

    const onBreakpoint = (broken: boolean) => {
      console.log(broken);
    };

    return {
      ...toRefs(data),
      onCollapse,
      onBreakpoint,
    }
  }
}
</script>